<template>
  <view :data-theme="globPrimary">
    <mescroll-uni
      :ref="'mescrollRef' + i"
      @init="mescrollInit"
      :height="mescrollHeight"
      top="41px"
      :bottom="isChecked ? '98rpx' : '0'"
      :down="downOption"
      :up="upOption"
      @down="downCallback"
      @up="upCallback"
    >
      <view class="page-box">
        <view
          class="collection-view"
          :style="isChecked ? 'transform: translateX(0)' : 'transform: translateX(-78rpx)'"
        >
          <view class="item" v-for="item in collectionList" :key="item.id">
            <view class="left"
              ><u-checkbox
                v-model="item.checked"
                :activeColor="globPrimaryColor"
                size="44"
                icon-size="30"
                shape="circle"
              ></u-checkbox
            ></view>
            <courseImage
              width="307"
              height="172"
              :image="item.cover_url"
              :courseType="item.course_type"
              :courseTypeText="item.course_type_text"
            ></courseImage>
            <view class="content" @click="todetail(item)">
              <view class="title u-line-2">{{ item.title }}</view>
              <view class="bottom">
                <view class="count">{{ `${item.sale_count}人报名` }}</view>
                <!-- #ifdef H5 -->
                <view class="num price" v-if="item.price > 0">{{
                  item.price | formatCurrency
                }}</view>
                <!-- #endif -->
                <!-- #ifndef H5 -->
                <view class="num price" v-if="item.price > 0"> ￥{{ item.price }}</view>
                <!-- #endif -->
                <view class="num free" v-else>免费</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </mescroll-uni>
    <view class="bottom-box" v-if="isChecked">
      <u-checkbox
        v-model="checkAllFlag"
        :activeColor="globPrimaryColor"
        size="44"
        icon-size="30"
        shape="circle"
        @change="changeCheckAll"
        >全选</u-checkbox
      >
      <view class="count" :style="{ color: globPrimaryColor }" @click="handleCancelAll">{{
        `取消收藏(${checkedNum})`
      }}</view>
    </view>
  </view>
</template>

<script>
import courseImage from '@/components/common/courseImage.vue'
import { mapGetters } from 'vuex'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
import MescrollMoreItemMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js'
export default {
  mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
  components: {
    courseImage,
  },
  props: {
    value: {
      type: String,
      default: '',
    },
    isChecked: {
      type: Boolean,
    },
    i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
    index: {
      // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
      type: Number,
      default() {
        return 0
      },
    },
    tabs: {
      // 为了请求数据,演示用,可根据自己的项目判断是否要传
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      collectionList: [],
      checkedNum: 0,
      resourceId: '',
      checkAllFlag: false,
      downOption: {
        auto: false,
      },
      upOption: {
        auto: false,
      },
    }
  },
  watch: {
    collectionList: {
      deep: true,
      handler() {
        this.renewal()
      },
    },
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
    globWindowHeight() {
      return this.$u.sys().windowHeight
    },
    mescrollHeight() {
      let height = this.globWindowHeight - this.globNavbarHeight - this.globStatusBarHeight
      return `${height}px`
    },
  },
  methods: {
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      //联网加载数据
      let type = this.tabs[this.i].val
      this.$edu.api
        .getUserCollectionList({
          source_type: type,
          page: page.num,
          count: page.size,
        })
        .then((res) => {
          const { data } = res
          let list = data.data

          list.forEach((item, index) => {
            item.checked = false
          })
          this.mescroll.endSuccess(list.length)
          if (page.num == 1) this.collectionList = []
          this.collectionList = this.collectionList.concat(list)
        })
    },
    /*下拉刷新的回调 */
    downCallback() {
      this.mescroll.resetUpScroll()
    },
    todetail(item) {
      this.$u.route('pageCourse/course/details', {
        id: item.source_id,
      })
    },
    // 全选与取消全选
    changeCheckAll(e) {
      let flag = e.value
      this.collectionList.forEach((item, index) => {
        item.checked = flag
      })
    },
    // 取消收藏
    handleCancelAll() {
      let _this = this
      let list = this.collectionList.filter((item) => item.checked == true)
      let resource = list.map((item) => item.id)
      this.resourceId = resource.toString()
      if (this.$u.test.empty(resource)) {
        _this.$u.toast('请选择要取消收藏的课程')
        return
      }
      _this.$edu.api
        .deleteUserCollectionBatch({
          ids: _this.resourceId,
          source_type: _this.value,
        })
        .then((res) => {
          _this.$u.toast(res.msg)
          _this.mescroll.resetUpScroll(false)
          _this.mescroll.scrollTo(0, 0)
        })
        .catch((res) => {
          _this.$u.toast(res.msg)
        })
    },
    renewal() {
      if (this.$u.test.empty(this.collectionList)) {
        this.checkAllFlag = false
        this.checkedNum = 0
      } else {
        let checked =
          this.collectionList.filter((item) => item.checked).length == this.collectionList.length
        let length = this.collectionList.filter((item) => item.checked).length
        this.checkAllFlag = checked
        this.checkedNum = length
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.page-box {
  padding-right: 30rpx;
  margin-left: 30rpx;
  overflow: hidden;
}
.collection-view {
  width: 768rpx;
  transition: all 0.15s linear 0s;
  .item {
    display: flex;
    margin-top: 32rpx;
    .left {
      margin-right: 34rpx;
      width: 44rpx;
      display: flex;
      align-items: center;
    }
    .content {
      flex: 1;
      margin-left: 24rpx;
      .title {
        font-size: 30rpx;
        font-weight: 400;
        color: $edu-main-color;
        height: 80rpx;
        line-height: 40rpx;
      }
      .bottom {
        margin-top: 52rpx;
        display: flex;
        align-items: center;
        .count {
          font-size: 24rpx;
          font-weight: 400;
          color: #888888;
        }
        .num {
          margin-left: auto;
          font-size: 30rpx;
          font-weight: 500;
        }
        .price {
          color: $edu-price-color;
        }
        .free {
          color: $edu-free-color;
        }
      }
    }
  }
}
.bottom-box {
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  height: 98rpx;
  box-shadow: 0 2rpx 14rpx 0 rgba(0, 0, 0, 0.06);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  .count {
    margin-left: auto;
    font-size: 32rpx;
    font-weight: 400;
    @include text-color();
  }
}
</style>
